
<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>显示鼠标单击位置</title>
  <style>
    .mouse{position:absolute;background:#ffd965;width:40px;height:40px;border-radius:20px;}
  </style>
</head>
<body>
  <div id="mouse" class="mouse"></div>
  <script>
    var mouse = document.getElementById('mouse');
    //需求：鼠标在页面上单击时，获取单击时的位置，并显示一个小圆点
    document.onclick = function(event) {
      // 获取事件对象的兼容处理
      var event = event || window.event;
      // 鼠标在页面上的位置
      var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
      var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
      // 计算<div>应该显示的位置
      var targetX = pageX - mouse.offsetWidth / 2;
      var targetY = pageY - mouse.offsetHeight / 2;
      // 在鼠标单击的位置显示<div> 
      mouse.style.display = 'block';
      mouse.style.left = targetX + 'px';
      mouse.style.top = targetY + 'px';
    };
  </script>
  <li><a href="8.html">返回</a></li>
</body>
</html>